// vue2 
// vue2的数据响应式 是由 Object.defineProperty()
// set 劫持 数据 get赋值数据

function updateView(){
  console.log("触发视图更新")
    
}

function observer(target){
    if(typeof target!=='object'||target==null){
      return target
    }

    for(let key in target){
      // 循环对象的每个属性 每个都监听
      defineReactive(target,key,target[key])
    }
}

function defineReactive(target,key,value){

  // Object.defineProperty(obj,'name',{
  //     // value:"你好",
  //     get(){
  //       return "你好"
  //     },
  //     set(val){},
  //     enumerable:true,
  //     writable:true,
  //     configurable:false
  // })
  observer(value)//首次也需要完全递归监听
  Object.defineProperty(target,key,{
      get(){
        return value
      },
      set(newValue){
        if(newValue!==value){
          // vue2的响应式缺点
          // 每次得到新的值 都要 递归监听
          // vue2的数据响应式 不管用没用到数据
          // 都要递归监听 而且一次性监听完成 浪费性能
          observer(newValue)//递归监听
          value=newValue; //数据更新了
          updateView()//触发视图更新
        }
      }
  })

}


// vue2
let data={
  name:"张三",
  age:20,
  info:{
    address:"北京",
    age:{hh:111}
  },
  nums:[10,20,30]
}
observer(data)
// data.name=50;
data.info.address="上海"
